"use strict";
define(['Ember', 'ace'], function (Em, ace) {

    var VueComponent = {
        template: '#tpl-editor',
        props: {source: String},
        data() {
            return {
                currentRow: 0
            }
        },

        methods: {

            getContent() {
                return this.editor.getSession().getValue();
            },

            setContent(content) {
                this.editor.getSession().setValue(content);
            },

            setAnnotations(annotations) {
                this.editor.getSession().setAnnotations(annotations);
                if (annotations.length)
                    this.editor.gotoLine(annotations[0].row);
            }
        },

        mounted() {
            this.editor = ace.edit(this.$el);
            this.editor.setTheme("ace/theme/tomorrow_night");
            this.editor.session.setMode("ace/mode/gcode");
            this.editor.on('change', () => {
                // TODO: Изменился контент
                // Em.run.once(_this, _this.notifyPropertyChange, 'content');
            });
            this.editor.selection.on('changeCursor', (event) => {
                this.currentRow = this.editor.selection.getCursor().row;
                this.$root.currentRow = this.currentRow;
            });

            if(this.source !== undefined) {
                var el = document.querySelector(this.source);
                if(el){
                    var text = el.textContent;
                    this.setContent(text);
                }
            }
        }
    };

    var GcodeEditorComponent = Em.Component.extend({
        tagName: 'pre',
        didInsertElement: function () {
            var _this = this;
            this.set('editor', ace.edit(this.get('element')));
            var editor = this.get('editor');
            editor.setTheme("ace/theme/tomorrow_night");
            editor.session.setMode("ace/mode/gcode");
            editor.on('change', function () {
                Em.run.once(_this, _this.notifyPropertyChange, 'content');
            });
            editor.selection.on('changeCursor', function (event) {
                _this.set('currentRow', editor.selection.getCursor().row);
            });
            if (this.get('preset')) {
                this.set('content', this.get('preset'));
                this.set('preset', null);
            }
        },
        content: function (key, val) {
            if (!this.get('editor')) {
                this.set('preset', val);
                return val;
            }
            if (arguments.length == 1) {
                return this.get('editor').getSession().getValue();
            } else {
                this.get('editor').getSession().setValue(val);
                return val;
            }
        }.property(),
        annotations: function (key, val) {
            if (!this.get('editor'))
                return val;
            if (arguments.length == 1)
                return this.get('editor').getSession().getAnnotations();
            else {
                this.get('editor').getSession().setAnnotations(val);
                if (val.length)
                    this.get('editor').gotoLine(val[0].row);
                return val;
            }
        }.property()
    });

    return {GcodeEditorComponent: GcodeEditorComponent, VueComponent: VueComponent};
});